<template>
  <div>
    <!-- 搜索框 -->
    <div class="seach">
      <div class="seach-bg">
        <i class="el-icon-search"></i>
        <input type="text" v-model="inputText" placeholder="搜索歌曲、歌手、专辑" />
        <i class="el-icon-error" v-show="inputText != ''" @click="inputText = ''"></i>
      </div>
    </div>
    <hr />
    <!-- 热门搜索 -->
    <div class="hot-seach" v-show="inputText == ''">
      <h2>热门搜索</h2>
      <ul>
        <li v-for="(item,index) of list" :key="index">{{ item.first }}</li>
      </ul>
    </div>
    <!-- 搜索显示 -->
    <div class="seachDisplay" v-show="inputText != ''">
      <p>搜索 '{{ inputText }}'</p>
      <ul>
        <li v-for="(item,index) of keywords" :key="index">
          <i class="el-icon-search"></i>
          {{ item.keyword }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { log } from 'util';
export default {
  data() {
    return {
      inputText: "",
      list: [],
      keywords: []
    };
  },
  mounted() {
    axios({
      url: "/api/search/hot"
    }).then(res => {
      if (res.status == 200) {
        this.list = res.data.result.hots;
      }
    });
  },
  // 监听是否输入
  watch: {
    inputText(nowValue) {
      if (nowValue) {
        axios({
          url: "/api/search/suggest",
          params: { keywords: nowValue,type:'mobile' }
        }).then(res => {
          this.keywords = res.data.result.allMatch;
          console.log(this.keywords);
          
        });
      }
    }
  }
};
</script>
<style>
.seach {
  height: 60px;
  padding: 15px 10px;
  box-sizing: border-box;
  background: #fcfcfd;
}
.seach-bg {
  width: 100%;
  height: 100%;
  background: #ebecec;
  border-radius: 15px;
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
}
.seach-bg i {
  position: absolute;
  top: 5px;
  font-size: 0.3rem;
  color: #c9c9c9;
}
.seach-bg i:first-child {
  left: 10px;
}
.seach-bg i:last-child {
  right: 10px;
}
.seach-bg input {
  height: 100%;
  width: 100%;
  border: none;
  float: left;
  color: #c9c9c9;
  background: transparent;
  outline: none;
  padding-left: 2px;
}
.seach-bg input:focus {
  color: #000;
}
/* 热门搜索 */
.hot-seach {
  margin: 15px 10px 0;
}
h2 {
  font-weight: bolder;
  font-size: 0.3rem;
  /* margin-bottom: 10px; */
}
.hot-seach ul {
  overflow: hidden;
}
.hot-seach li {
  border: 1px solid #eaebee;
  border-radius: 20px;
  float: left;
  font-size: 0.3rem;
  margin: 10px 7px;
  padding: 5px 15px;
}
/* 搜索显示 */
.seachDisplay {
  padding: 0 20px;
}
.seachDisplay p {
  font-size: 0.3rem;
  color: #507DAF;
  border-bottom: 1px solid #c9c9c9;
  padding: 10px 0;
}
.seachDisplay li {
  border-bottom: 1px solid #c9c9c9;
  position: relative;
  font-size: 0.35rem;
  padding: 10px 43px;
  padding-right: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.seachDisplay li i {
  position: absolute;
  top: 15px;
  left: 10px;
  font-size: 0.35rem;
  color: #c9c9c9;
}
</style>